<template>
  <div class="main-page">
    <v2ex-tab :tabList="tabList" @onTabClick="tabClick"></v2ex-tab>
    <v2ex-list :contentData="contentData" @openContentDetail="openContentDetail"></v2ex-list>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {mapActions} from "vuex";
  import V2exTab from "../../components/TabList.vue";
  import V2exList from "../../components/ContentList.vue";
  export default {
    name : 'main-page',
    components: {
      V2exList,
      V2exTab
    },
    computed: {
      ...mapState({
        tabList: state => state.tabState.tabData,
        contentData : state => state.contentState.contentData,
      })
    },
    methods : {
      ...mapActions([
        'getContentData',
      ]),
      tabClick : function (tab) {
        this.getContentData(tab.url);
      },
      openContentDetail : function (data) {
        this.$router.push({name: 'contentDetail',params : data});
      }
    }
  }
</script>

<style>
  .main-page{
    background: white;
  }
</style>
